<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit" />
    <title>enuo grid test</title>
    <link rel="stylesheet" href="https://v3.bootcss.com/dist/css/bootstrap.min.css" />
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/admin-lte/2.3.8/css/AdminLTE.min.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" /> -->
</head>

<body ng-app="app" ng-controller="TestController">
    <nav class="navbar navbar-inverse ">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <a class="navbar-brand" href="https://github.com/zhanxp/angular-enuo-grid">angular enuo grid</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container">
        <div class="starter-template">
            <h1>angular enuo grid</h1>
            <p class="lead">a grid table with angular 1x and bootstrap.</p>
        </div>


        <enuo-grid config="gridConfig" grid-source="list"></enuo-grid>

    </div>

    </div>
    <!-- /.container -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="./dist/enuo-grid.css" />
    <script src="./dist/enuo-grid.js"></script>
    <script type="text/javascript">
        angular.module('app', ['enuo.grid'])
            .controller("TestController", ['$scope', '$filter', '$compile', function($scope, $filter, $compile) {
                $scope.list = [];
                $scope.gridConfig = {
                    pkid: 'InfoID',
                    loading: true,
                    style: {
                        contentStyle: {
                            height: '200px'
                        },
                    },
                    page: {
                        pageIndex: 1,
                        pageSize: 10,
                        total: 10,
                        callback: function(page) {
                            $scope.loadData(page);
                        },
                    },
                    onSort: function(value, lastSort) {
                        console.log(value);
                        console.log(lastSort);
                    },
                    query: {
                        action: {
                            callback: function(query) {
                                $scope.loadData();
                            }
                        },
                        items: [{
                            key: 'Status',
                            value: 1,

                        }, {
                            key: 'ClassID',
                            type: 'select',
                            display: '全部分类',
                            value: '',
                            options: [{
                                name: '分类1',
                                value: 1
                            }, {
                                name: '分类2',
                                value: 2
                            }],
                        }, {
                            key: 'Title',
                            type: 'input',
                            value: '',
                            placeholder: '请输入关键字'
                        }]
                    },
                    tool: {
                        items: [{
                            name: '添加',
                            icon: 'glyphicon glyphicon-plus',
                            cssClass: 'text-success',
                            click: function(selectItems) {
                                $scope.fnShowFrom();
                            }
                        }, {
                            name: '删除',
                            icon: 'glyphicon glyphicon-remove',
                            cssClass: 'text-danger',
                            click: function(selectItems) {
                                $scope.fnUpdateStatus(selectItems);
                            }
                        }, {
                            name: '刷新',
                            icon: 'glyphicon glyphicon-repeat',
                            cssClass: 'text-info',
                            click: function(selectItems) {
                                $scope.loadData();
                            }
                        }, ]
                    },
                    columns: [{
                        name: '标题',
                        key: 'Title',
                        width: 150,
                        html: true,
                        isSort: true,
                    }, {
                        name: 'NoKey',
                        width: 150,
                        isSort: true,
                    }, {
                        name: 'Empty',
                        key: 'Empty',
                        width: 150,
                    }, {
                        name: 'Null',
                        key: 'Null',
                        width: 150,
                    }, {
                        name: 'ng-click',
                        key: 'ng',
                        width: 200,
                        click: function(value, item, $event, index) {
                            alert(index);
                        },
                        format: function(value, item) {
                            //value
                            //column
                            //index
                            //row
                            return "<a ng-click='click($event,1)'>click1 {{row}}:{{index}}</a> | <a ng-click='click($event,2)'>{{ column.name }} {{ value }} </a>";
                        }
                    }, {
                        name: '时间',
                        key: 'CreateDate',
                        width: 150,
                        format: function(value) {
                            return $filter('date')(value, 'yyyy-MM-dd');
                        }
                    }, {
                        name: '修改',
                        width: '100px',
                        template: 'edit',
                        width: 150,
                        click: function(value, item) {
                            $scope.fnShowFrom(item);
                        }
                    }, {
                        name: '删除',
                        width: '100px',
                        template: 'delete',
                        width: 150,
                        format: function(value, item) {
                            return item.Status == 1 ? "删除" : "还原";
                        },
                        click: function(value, item) {
                            var ids = [];
                            ids.push(item.InfoID);
                            $scope.fnUpdateStatus(ids);
                        }
                    }]
                };

                $scope.fn1 = function() {
                    alert('click 1');
                }

                $scope.fn2 = function() {
                    alert('click 2');
                }

                $scope.fnAlert = function(v) {
                    alert(v);
                }

                $scope.loadData = function(page) {
                    var query = {};
                    angular.forEach($scope.gridConfig.query.items, function(data, index, array) {
                        query[data.key] = data.value;
                    });
                    console.log(query);

                    page = page || $scope.gridConfig.page.pageIndex;

                    $scope.gridConfig.loading = true;

                    $scope.list = [];
                    for (var i = 0; i < 10; i++) {
                        var id = (page - 1) * 10 + i;
                        var item = {};
                        item.InfoID = id;
                        item.Title = "<strong> Title </strong> " + id;
                        item.Empty = '';
                        item.Null = null;
                        item.ng = i;
                        item.CreateDate = new Date();
                        item.Status = 1;
                        $scope.list.push(item);
                    }
                    $scope.gridConfig.page.total = 100;

                    $scope.gridConfig.loading = false;
                }

                $scope.fnUpdateStatus = function(ids) {
                    console.log("del " + JSON.stringify(ids));
                };

                $scope.fnShowFrom = function(item) {
                    // $scope.gridConfig.style.contentStyle.height = '300px';
                    if (item) {
                        console.log(item);
                    } else {
                        console.log('add');
                    }
                };

                $scope.loadData();

            }]);
    </script>
</body>

</html>
